<script>
import response from "core-js/internals/is-forced";

export default {
  data() {
    return {
      form: {},
      form1: {},
      healh: {},
      rejectDialogVisible: false, // 控制对话框的显示和隐藏
      controldialog: false, // 控制对话框的显示和隐藏
      rejectReason: '',
      candialog: false,//控制对话框的显示和隐藏
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

    }
  },
  methods: {
    findById() {
      this.id = JSON.parse(localStorage.getItem("id"))//获取浏览器地址栏传递过来的id
      this.axios.get(`http://localhost:9000/b/stables/findById/${this.id}`).then(res => {
        this.form = res.data.data;
        console.log(res.data.data)
      })
    },

    dewllers() {
      this.$router.push({path: '/dwellers'})
    },

    // tiao(){
    //   this.$router.push({ path: '/FwView'})
    // },


    // 审核通过
    approve() {
      this.$confirm('确定要审核通过吗？', '确认审核', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/2`)
            .then(res => {
              this.$message({
                message: '审核通过成功！！！',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 1000);
            })
            .catch(error => {
              alert('已取消！！！');
              console.error('审核通过失败！！！', error);
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核！！！'
        });
      });
    },


    //驳回
    // showRejectDialog() {
    //   this.rejectDialogVisible = false;
    //   this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/0`, { reason: this.rejectReason })
    //       .then(res => {
    //         this.$message({
    //           message: '驳回成功',
    //           type: 'success'
    //         });
    //         this.rejectDialogVisible = true;
    //         this.rejectReason = '';
    //         this.$router.go(0);
    //       })
    //       .catch(error => {
    //         console.error('驳回失败', error);
    //       });
    // },
    // submitReject() {
    //   if (!this.rejectReason) {
    //     this.$message.error('请填写驳回原因');
    //     return;
    //   }
    // },

    showRejectDialog() {
      this.rejectDialogVisible = true;
      this.form.overrule = "";
    },

    // submitReject() {
    //   if (!this.rejectReason) {
    //     this.$message.error('请填写驳回原因');
    //
    //   }
    addhealth() {
      this.axios.post(`http://localhost:9000/b/stables/update`, this.form).then(res => {
        this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/0`, {reason: this.rejectReason})
        this.axios.post('http://localhost:9000/b/stables/bh/sendSms', requestData)
            .catch(error => {
              console.error(error);
            })
            .then(res => {
              this.$message({
                message: '驳回成功！！！',
                type: 'success'
              });
              this.rejectDialogVisible = false;
              this.rejectReason = '';

              setTimeout(() => {
                this.$router.go(0);
              }, 1000);
            })
            .catch(error => {
              console.error('驳回失败！！！', error);
              this.$message.error('驳回失败，请稍后再试');
            });
      })
    },
    // 完成服务
    completeService() {
      this.controldialog = true;
      this.healh = {};

    },
    entry() {
      this.axios.post(`http://localhost:9000/b/stables/add/${this.form.id}`, this.healh).then(res => {
        this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/3`)
            .then(res => {
              this.$message({
                message: '完成服务成功！！！',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 1000);
            })
            .catch(error => {
              console.error('完成服务失败！！！', error);
            });
      });
    },

    cancelAppointment1() {
      this.candialog = true;// 控制对话框的显示和隐藏
      this.form.cancel = "";
    },
    // 取消预约
    canenty() {
      this.axios.post(`http://localhost:9000/b/stables/canupdate`, this.form).then(res => {
        this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/4`)
            .then(res => {
              this.$message({
                message: '取消预约成功！！！',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 1000);
            })
            .catch(error => {
              console.error('取消预约失败！！！', error);
            });
      });
    },


    //返回
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
  },


  // // 按钮审核通过跳转页面
  // ss(){
  //   this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/${2}`).then(res=>{
  //     this.$message({
  //       message: '审核通过',
  //       type: 'success'
  //     })
  //   })
  //   this.$router.go(0);
  // },
  // // 按钮驳回跳转页面
  // bh(){
  //   this.axios.post(`http://localhost:9000/b/stables/updateStatus/${this.form.id}/${0}`).then(res=>{
  //     this.$message({
  //       message: '驳回成功',
  //       type: 'success'
  //     })
  //   })
  //   this.$router.go(0);
  // },
  //
  // // 按钮完成服务跳转页面
  // wc(){
  //   this.$router.push({ path: '/xq'})
  // },
  // // 按钮取消预约跳转页面
  // qx(){
  //   this.$router.push({ path: '/xq'})
  // },

  created() {
    this.findById();
  },
}
</script>

<template>
  <div class="container"  style="width: 100%;">
    <h4 class="section-title">服务详情</h4>
    <el-divider></el-divider>
    <h4 class="sub-title">居民信息</h4>

    <div class="resident-info">

      <div class="info-item">
<!--        <el-button type="text">姓名: {{ form.dewname }}</el-button>-->
        <span style="margin-left: 10%">姓名: {{ form.dewname }}</span>
        <span style="margin-left: 10%">身份证号: {{ form.identity }}</span>
        <span style="margin-left: 10%">性别: {{ form.sex === 1 ? "男" : "女" }}</span>
        <span style="margin-left: 10%">年龄: {{ form.age }}</span>
        <span style="margin-left: 10%">联系电话: {{ form.phone }}</span>
        <span style="margin-left: 10%">现居地: {{ form.current }}</span>
        <span style="margin-left: 10%">居民标签: {{ form.label }}</span>
      </div>
      <br>
      <div class="info-item" style="width: 100%">
        <div class="header" style="width: 100%">
          <div class="title" style="margin-left: 10%">家庭成员</div>
          <div class="card" style=" margin-right: 960px;">
            <el-avatar :src="url"></el-avatar>
            <div class="info">
              <div class="name-age">
                <span class="name">{{ form.mname }}</span>
                <span class="age">{{ form.fage }}岁</span>
                <span class="icon">🌟</span>
              </div>
              <div class="relation">关系: {{ form.gx }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-divider></el-divider>

    <h4 class="sub-title">服务信息</h4>
    <div class="service-info" style="text-align: left">
      <span class="service-item">服务编号: {{ form.number }}</span>
      <span class="service-item" style="margin-left: 15%">服务机构: {{ form.agename }}</span>
      <span class="service-item" style="margin-left: 15%">服务团队: {{ form.tname }}</span>
      <span class="service-item" style="margin-left: 15%">服务医生: {{ form.dname }}</span>
      <br>
      <br>
      <span class="service-item">服务包: {{ form.pname }}</span>
      <span class="service-item" style="margin-left: 135px">服务项目: {{ form.project }}</span>
      <span class="service-item" style="margin-left: 20%">服务地点: {{ form.aname }}</span>
      <span class="service-item" style="margin-left: 10%">预约时间: {{ form.booking }}</span>
      <br>
      <br>
      <span class="service-item">提交时间: {{ form.submi }}</span>
      <span class="service-item" style="margin-left: 8%">服务备注: {{ form.notes }}</span>
      <span class="service-item" style="margin-left: 18%">服务来源: {{ form.sname }}</span>
      <br>
      <br>
      <span v-if="form.status === 2">审核人: {{ form.reviewers }}</span>
      <span v-if="form.status === 2" style="margin-left: 10%">审核时间: {{ form.audit }}</span>
      <span v-if="form.status === 0">驳回原因: {{ form.overrule }}</span>
      <span v-if="form.status === 3">完成时间: {{ form.finish }}</span>
      <span v-if="form.status === 4">取消时间: {{ form.lifted }}</span>
      <span v-if="form.status === 4" style="margin-left: 15%">取消原因: {{ form.cancel }}</span>
    </div>
    <el-divider></el-divider>
    <div class="health-info" v-if="form.status === 3">
      <h4>健康随访信息</h4>
      <div class="info-grid">
        <div class="item">
          <span class="label">血压:{{ form.blood }} mmHg</span>
        </div>
        <div class="item">
          <span class="label">空腹血糖:{{ form.fasting }} mmol/L</span>
        </div>
        <div class="item">
          <span class="label">心率:{{ form.heart }} bpm</span>
        </div>

      </div>
      <br>
      <br>
      <div>
        <div class="item">
          <span class="label">病情描述:{{ form.description }}</span>
        </div>
        <br>
        <br>
        <div class="item">
          <span class="label">健康指导:{{ form.guide }}</span>
        </div>
      </div>


    </div>

    <div class="action-buttons">
      <el-button type="success" v-if="form.status === 1" @click="approve">审核通过</el-button>
      <el-button type="danger" v-if="form.status === 1" @click="showRejectDialog">驳回</el-button>
      <el-button type="success" v-if="form.status === 2" @click="completeService">完成服务</el-button>
      <el-button type="danger" v-if="form.status === 2" @click="cancelAppointment1">取消预约</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <!-- 驳回对话框 -->
    <el-dialog title="驳回" :visible.sync="rejectDialogVisible" width="30%">
      <el-form ref="form" :model="healh" label-width="80px">
        <el-form-item label="驳回原因">
          <el-input v-model="form.overrule"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addhealth">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!--      取消原因弹框-->
    <el-dialog title="取消预约服务确认" :visible.sync="candialog" width="30%">
      <el-form ref="form" :model="healh" label-width="80px">
        <el-form-item label="取消原因">
          <el-input v-model="form.cancel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="canenty">确定</el-button>
          <el-button @click="candialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog title="填写健康随访信息" :visible.sync="controldialog" width="30%">
      <el-form ref="form" :model="healh" label-width="80px">
        <el-form-item label="血压">
          <el-input v-model="healh.blood"></el-input>
        </el-form-item>
        <el-form-item label="空腹血糖">
          <el-input v-model="healh.fasting"></el-input>
        </el-form-item>
        <el-form-item label="心率">
          <el-input v-model="healh.heart"></el-input>
        </el-form-item>
        <el-form-item label="病情描述">
          <el-input type="textarea" v-model="healh.description"></el-input>
        </el-form-item>
        <el-form-item label="健康指导">
          <el-input type="textarea" v-model="healh.guide"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="entry">确定</el-button>
          <el-button @click="controldialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
  max-width: 100%; /* 限制最大宽度 */
  //margin: 0 auto; /* 居中对齐 */
  padding: 20px; /* 内边距 */
  background: #f5f5f5; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.section-title {
  font-size: 24px; /* 标题字体大小 */
  margin-bottom: 10px; /* 下方外边距 */
}

.sub-title {
  font-size: 18px; /* 字体大小 */
  margin: 20px 0 10px; /* 上下外边距 */
}

.resident-info, .service-info, .health-info {
  margin-bottom: 20px; /* 下外边距 */
  padding: 20px; /* 内边距 */
  background: #fff; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */

}

.info-item {
  font-size: 18px;
  margin-bottom: 10px; /* 下外边距 */
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 组件间距 */

}

.header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
}

.card {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 10px; /* 内边距 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 8px; /* 圆角 */
  background-color: #fff; /* 背景颜色 */
}

.name-age {
  display: flex; /* 使用flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
}

.icon {
  margin-left: 5px; /* 左外边距 */
  color: #4caf50; /* 图标颜色 */
}

.info-grid {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 水平分隔 */
  margin-top: 15px; /* 顶部边距 */
}

.item {
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 两端对齐 */
  width: 30%; /* 自适应宽度 */
}

.label {
  font-weight: bold; /* 粗体 */
  color: #555; /* 字体颜色 */
}

.value {
  color: #888; /* 值的颜色 */
}

.description, .advice {
  margin-top: 10px; /* 顶部边距 */
  color: #444; /* 字体颜色 */
}

.action-buttons {
  display: flex; /* 使用flex布局 */
  justify-content: flex-start; /* 左对齐 */
  gap: 10px; /* 按钮之间的间距 */
  margin-top: 20px; /* 上边距 */
}
</style>
